{% include "header.tpl" %} <title>{{ pageTitle }}</title>
<script type="text/javascript">
	window.onload = function() {
		var base = new dhtmlXLayoutObject('container', '3L', 'dhx_skyblue');
        base.cont.obj._offsetTop = 60;
        base.cont.obj._offsetLeft = 30;
		
		base.cells("a").setWidth(400);
		base.cells("a").hideArrow();
		var text = base.cells("a").setText("Users");
		var text = base.cells("b").setText("Roles");
		var text = base.cells("c").setText("Permissions");

		var toolbar = base.attachToolbar();
		toolbar.setIconsPath("images/");
		toolbar.setIconSize(48);

		// adding a home link for default
		toolbar.addButton('home', 'Home', 'Home');
		toolbar.setItemImage('home', 'Home.png');
		toolbar.setItemToolTip('home', 'Home');
		toolbar.attachEvent("onClick", function(id) {
			menuButtons(id);
		});
		// build the menus dynamically from ajax call to controller
		$.getJSON('core/getMenu', function(data) {
			$.each(data, function(key, value) {
				buildToolbar(value, toolbar);
			})
		})
		// status bar
		var statusBar = base.attachStatusBar();

        // user tree
        base.cells("a").attachObject('a_tree');
        var a_tree = new dhtmlXTreeObject('a_tree', "100%", "100%", 0);
        a_tree.setImagePath('css/imgs/');
        a_tree.loadXML('xml/atreedata.xml');
        
        // roles tree
        base.cells("b").attachObject('b_tree');
        var b_tree = new dhtmlXTreeObject('b_tree', "100%", "100%", 0);
        b_tree.setImagePath('css/imgs/');
        b_tree.loadXML('xml/btreedata.xml');
        
        // permissions tree
        base.cells("c").attachObject('c_tree');
        var c_tree = new dhtmlXTreeObject('c_tree', "100%", "100%", 0);
        c_tree.setImagePath('css/imgs/');
        c_tree.loadXML('xml/ctreedata.xml');
	}
</script>
</head>
<body>
    <div id="header">
        <span id='header_text'>Encompass</span>
        <br />
        <span id='tagline'>Project Management</span>
    </div>
    <div id="container">
        <div id="a_tree"></div>
        <div id="b_tree"></div>
        <div id="c_tree"></div>
    </div>
    <div id="footer"></div>
</body>
</html> 
